<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/dialog.css">
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <div class="dialog" id="box">
        <div class="dialog-title" id="drop">
            <span>注册信息（可以拖曳）</span>
            <div class="dialog-close" id="close">×</div>
        </div>
        <div class="dialog-body">
        </div>
    </div>
    <script>
        //用JavaScript写的

        // var box = document.querySelector('#box')
        // var drop = document.querySelector('#drop')
        // drop.addEventListener('mousedown',function(e){
        //     var x = e.pageX-box.offsetLeft
        //     var y = e.pageY-box.offsetTop
        //     document.addEventListener('mousemove',move)
        //     function move(e) {
        //         box.style.left = e.pageX-x+'px'
        //         box.style.top = e.pageY-y+'px'
        //     }
        //     document.addEventListener('mouseup',function(){
        //     document.removeEventListener('mousemove', move)
        // })
        // })

        // var close = document.querySelector('#close')
        // close.addEventListener('click',function(){
        //     box.style.display = 'none'
        // })


        //用jQuery写的
        $(document).ready(function () {
            // 拖曳功能
            $('#drop').mousedown(function (e) {
                var box = $('#box');
                var offsetX = e.pageX - box.offset().left;
                var offsetY = e.pageY - box.offset().top;
                $(document).mousemove(function (e) {
                    box.css({
                        left: e.pageX - offsetX + 'px',
                        top: e.pageY - offsetY + 'px'
                    })
                })
                $(document).mouseup(function () {
                    $(document).off("mousemove");   
                });
                //关闭功能
                $('#close').click(function(){
                    $('#box').hide();
                })

            });
        });
    </script>
</body>

</html>